<template>
	<view>
		<view class="time">
			<uni-dateformat
				:date='item.start_time || Date.now()'
				format='hh:mm:ss'
			></uni-dateformat>
		</view>
		<view
			class="TodoListItem" 
			:style="{borderLeft: item.status === 'done' ? '12rpx solid #1ada2a' : item.status === 'doing' ? '12rpx solid orange' : '12rpx solid skyblue'}"
			@longpress="onLongPress"
			@click="onClick"
		>
			<view class="content">
				{{item.content}}
			</view>
			<view v-if="item.status === 'done'" class="fac">
				<image class="icon" src="../../static/icon/zhengque_face_active.svg" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			getListData: Function
		},
		data() {
			return {
				showOprate: true
			}
		},
		methods: {
			onClick() {
				uni.navigateTo({
					url: "/pages/TodoEdit/TodoEdit?id=${this.item._id || ''}"
				})
			},
			onLongPress() {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '是否删除此条待办项',
					async success(res) {
						if (res.confirm) {
							await uni.request({
								url: `${_this.BASE_URL}/todo/del/${_this.item._id}`,
								method: 'GET'
							})
							_this.getListData();
							console.log('删除')
						} else if (res.cancel) {
							console.log('取消')
							return
						}
					}
				})
			},
			onClick() {
				uni.navigateTo({
					url: `/pages/TodoEdit/TodoEdit?id=${this.item._id || ''}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time {
		font-size: 28rpx;
		color: #aaa;
		font-weight: bold;
		margin-top: 20rpx;
	}
	.TodoListItem {
		margin: 20rpx 0;
		margin-top: 10rpx;
		padding: 0 40rpx;
		border-left: 12rpx solid orange;
		height: 100rpx;
		display: flex;
		align-items: center;
		color: #3c4044;
		font-size: 16px;
		border-bottom: 2rpx solid #e4e6eb;
		&.complete {
			border-left: 12rpx solid #1ada2a;
		}
		.content {
			flex: 1;
		}
		.oprate {
			margin-left: 10rpx;
		}
	}
</style>